<template>
        <el-card shadow="never" style="max-height: 70vh; overflow: auto">
            <el-form ref="form" :model="form" :rules="rules" label-width="90px" :disabled="disabled">
                <el-form-item label="id:" prop="id" v-show="false">
                    <el-input v-model="form.id" disabled />
                </el-form-item>
                <el-form-item label="所属用户:" prop="user_id">
                    <SelectPage v-model="form.user_id" disabled :url="'/admin/user/selectPage'"
                                placeholder="请选择所属用户"
                                show_field="nickname" show_id="uid" query_field="uid" :multiple="false" />
                </el-form-item>
                <el-form-item label="动态编号:" prop="post_id">
                    <el-input-number v-model="form.post_id" :step="1" :min="0" disabled></el-input-number>
                </el-form-item>
                <el-form-item label="所属分类:" prop="category1">
                    <SelectCategory url="/admin/sq.category/tree" ref="category" :queryParams="{type: 3 }"
                                    :check-strictly="true"
                                    :value="[form.category1]"
                                    @change="onChangeCategory"></SelectCategory>
                </el-form-item>
                <el-form-item label="投诉内容:" prop="content">
                    <el-input type="textarea" v-model="form.content" placeholder="请输入描述" clearable />
                </el-form-item>
                <el-form-item label="状态:" prop="status">
                    <el-radio-group v-model="form.status">
                        <el-radio v-for="(item, index) in status" :key="index" :label="item.value">{{ item.label }}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <template v-if="form.status === 2">
                    <el-form-item label="处理类型:" prop="handle_type">
                        <el-radio-group v-model="form.handle_type">
                            <el-radio v-for="(item, index) in handle_type" :key="index" :label="item.value">{{ item.label }}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="结果描述:" prop="handle_remark">
                        <el-input type="textarea" v-model="form.handle_remark" placeholder="请输入结果描述" clearable />
                    </el-form-item>
                </template>
                <el-form-item>
                    <el-button type="primary" @click="submitForm">确认 </el-button>
                    <el-button type="warning" @click="cancel">取消 </el-button>
                </el-form-item>
            </el-form>
        </el-card>
</template>

<script>
import { regionData } from 'element-china-area-data'
import SelectCategory from "../../../components/My/SelectCategory";
export default {
    name: 'EditForm',
    components: {SelectCategory},
    props: {
        findFormData: {
            type: Object,
            default: {}
        },
        editFormParams: {
            type: Object,
            default: {}
        },
        // 表单是否禁用
        disabled: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            // 编辑表单验证规则
            rules: {
                user_id: [{ required: true, message: "请输入所属用户", trigger: "blur" }],
                post_id: [{ required: true, message: "请输入动态编号", trigger: "blur" }],
                category1: [{ required: true, message: "请输入分类ID", trigger: "blur" }],
                handle_type: [{ required: true, message: "请选择处理类型", trigger: "blur" }],
                handle_remark: [{ required: true, message: "请输入结果描述", trigger: "blur" }],
            },
            form: {  },
            // 区域选择配置
            areaOptions: regionData,
            status: [
                { value: 1, label: '未处理' },
                { value: 2, label: '已处理' }
            ],
            handle_type: [
                { value: 1, label: '删除动态/科普' },
                { value: 2, label: '禁用用户' },
                { value: 3, label: '无需处理' }
            ]
        }
    },
    watch: {
        findFormData: {
           handler(nval) {
                if (JSON.stringify(nval) != '{}') {
                    this.$nextTick(() => {
                        this.form = nval
                    })
                }
            },
            immediate: true,
            deep: false,
        },
    },
    methods: {
        // 取消按钮
        cancel() {
            this.$emit('editFormCancel')
        },
        submitForm() {
            this.$refs['form'].validate((valid, obj) => {
                if (valid) {
                    if (this.form.status === 1) return this.$emit('submitForm', this.form)
                    const handleType = this.handle_type.find(el=>{
                        return el.value === Number(this.form.handle_type)
                    })
                    this.$confirm(`当前选中处理结果“${handleType.label}”，确认后无法恢复, 是否继续?`, '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$emit('submitForm', this.form)
                    }).catch(() => {
                    });
                }
            })
        },
        // 表单重置
        reset() {
            this.resetForm('form')
        },
        onChangeCategory(e, pathLabels) {
            e = e || []
            pathLabels = pathLabels || []
            this.$set(this.form, 'category1', e.length >= 1 ? e[0] : '')
            this.$set(this.form, 'category1_text', pathLabels.length >= 1 ? pathLabels[0] : '')
        },
    }
}
</script>
